<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 页面关系图</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f0f2f5;
                padding: 20px;
            }
            .container {
                max-width: 100%;
                margin: 0 auto;
            }
            .header {
                background-color: #ff9fb5;
                color: white;
                padding: 16px 24px;
                border-radius: 12px;
                margin-bottom: 24px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .mindmap-container {
                position: relative;
                width: 100%;
                height: calc(100vh - 150px);
                background-color: white;
                border-radius: 16px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                margin-bottom: 20px;
            }
            .tools {
                background-color: #ffd6e0;
                padding: 10px;
                border-radius: 10px 10px 0 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .zoom-controls {
                display: flex;
                gap: 10px;
                align-items: center;
            }
            .btn {
                background-color: white;
                color: #ff7b9c;
                border: none;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                transition: all 0.2s;
            }
            .btn:hover {
                background-color: #ff9fb5;
                color: white;
            }
            .category-filter {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }
            .category-btn {
                background-color: white;
                color: #333;
                border: 1px solid #ffd6e0;
                border-radius: 16px;
                padding: 4px 12px;
                font-size: 12px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .category-btn.active {
                background-color: #ff9fb5;
                color: white;
                border-color: #ff9fb5;
            }
            .category-btn:hover {
                background-color: #ffd6e0;
            }
            .mindmap {
                position: absolute;
                width: 6000px; /* 增大区域以容纳更分散的节点 */
                height: 3000px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0.8);
                transform-origin: center center;
                transition: transform 0.3s;
            }
            .node {
                position: absolute;
                background-color: white;
                border-radius: 10px;
                padding: 10px 15px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                width: 200px;
                cursor: pointer;
                transition: all 0.2s;
                z-index: 10;
            }
            .node.home {
                background-color: #ff9fb5;
                color: white;
            }
            .node-title {
                font-weight: bold;
                font-size: 14px;
                margin-bottom: 4px;
                display: flex;
                align-items: center;
            }
            .node-title i {
                margin-right: 8px;
            }
            .node-subtitle {
                font-size: 12px;
                color: #666;
                margin-bottom: 5px;
            }
            .node-details {
                font-size: 12px;
                display: none;
                margin-top: 8px;
                border-top: 1px dashed #eee;
                padding-top: 5px;
            }
            .node:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                transform: translateY(-2px);
            }
            .node.expanded .node-details {
                display: block;
            }
            .node.basic {
                border-left: 3px solid #3498db;
            }
            .node.period {
                border-left: 3px solid #9b59b6;
            }
            .node.pregnancy {
                border-left: 3px solid #e74c3c;
            }
            .node.postpartum {
                border-left: 3px solid #f39c12;
            }
            .node.diet {
                border-left: 3px solid #2ecc71;
            }
            .node.knowledge {
                border-left: 3px solid #1abc9c;
            }
            .node.community {
                border-left: 3px solid #34495e;
            }

            .connector {
                position: absolute;
                height: 2px;
                background-color: #ddd;
                transform-origin: left center;
                z-index: 5;
            }
            .connector::after {
                content: '';
                position: absolute;
                right: 0;
                top: -4px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 5px 0 5px 8px;
                border-color: transparent transparent transparent #ddd;
            }
            .connector-label {
                position: absolute;
                background-color: rgba(255, 255, 255, 0.9);
                border-radius: 3px;
                padding: 2px 5px;
                font-size: 10px;
                white-space: nowrap;
                transform: translate(-50%, -50%);
                z-index: 6;
            }
            .instruction-box {
                position: absolute;
                bottom: 20px;
                right: 20px;
                background-color: white;
                border-radius: 10px;
                padding: 15px;
                width: 300px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                z-index: 100;
                font-size: 12px;
            }
            .instruction-title {
                font-weight: bold;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .instruction-content {
                color: #666;
            }
            .legend {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 10px;
            }
            .legend-item {
                display: flex;
                align-items: center;
                font-size: 11px;
                margin-right: 10px;
            }
            .legend-color {
                width: 12px;
                height: 12px;
                margin-right: 5px;
                border-radius: 2px;
            }
            .node-toggle {
                float: right;
                font-size: 12px;
                color: #999;
                cursor: pointer;
            }
            .node-toggle:hover {
                color: #ff9fb5;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1 class="text-2xl font-bold">孕育宝典小程序 - 页面关系图</h1>
                <p class="mt-2 text-white opacity-90">思维导图展示页面间的交互流程与关系</p>
            </div>

            <div class="mindmap-container">
                <div class="tools">
                    <div class="zoom-controls">
                        <button class="btn" id="zoom-in"><i class="fas fa-plus"></i></button>
                        <button class="btn" id="zoom-out"><i class="fas fa-minus"></i></button>
                        <button class="btn" id="reset-view"><i class="fas fa-home"></i></button>
                    </div>
                    <div class="category-filter">
                        <button class="category-btn active" data-category="all">全部</button>
                        <button class="category-btn" data-category="basic">基础应用</button>
                        <button class="category-btn" data-category="period">经期与备孕</button>
                        <button class="category-btn" data-category="pregnancy">孕期管理</button>
                        <button class="category-btn" data-category="postpartum">产后恢复</button>
                        <button class="category-btn" data-category="diet">健康饮食</button>
                        <button class="category-btn" data-category="knowledge">知识教育</button>
                        <button class="category-btn" data-category="community">伴侣社区</button>
                    </div>
                </div>
                <div class="mindmap" id="mindmap">
                    <!-- 节点和连接器将通过JavaScript动态生成 -->
                </div>
                <div class="instruction-box">
                    <div class="instruction-title">
                        <span><i class="fas fa-lightbulb mr-1"></i> 使用说明</span>
                        <span class="node-toggle" id="toggle-instructions"><i class="fas fa-minus"></i></span>
                    </div>
                    <div class="instruction-content" id="instruction-content">
                        <p>• 点击节点可以展开/折叠详细信息</p>
                        <p>• 使用左上角的 + / - 按钮可以缩放视图</p>
                        <p>• 点击分类按钮可以筛选显示特定类型的页面</p>
                        <p>• 拖动空白区域可以平移整个思维导图</p>
                        <div class="legend">
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #3498db"></div>
                                基础应用
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #9b59b6"></div>
                                经期与备孕
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #e74c3c"></div>
                                孕期管理
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #f39c12"></div>
                                产后恢复
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #2ecc71"></div>
                                健康饮食
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #1abc9c"></div>
                                知识教育
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background-color: #34495e"></div>
                                伴侣社区
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 定义页面数据
            const pagesData = {
                // 基础应用相关页面
                home: {
                    id: 'home',
                    title: '首页',
                    subtitle: 'home.html',
                    category: 'basic',
                    icon: 'fa-home',
                    x: 3000, // 中心位置
                    y: 1500,
                    details: '应用主入口，提供经期/孕期/育儿各阶段功能入口，展示关键数据与提醒',
                    connections: [
                        { to: 'period_calendar', label: '经期管理' },
                        { to: 'pregnancy_home', label: '孕期管理' },
                        { to: 'knowledge_list', label: '知识库' },
                        { to: 'user_profile', label: '个人中心' },
                    ],
                },
                user_profile: {
                    id: 'user_profile',
                    title: '用户个人资料',
                    subtitle: 'user_profile.html',
                    category: 'basic',
                    icon: 'fa-user',
                    x: 2600,
                    y: 1300,
                    details: '用户信息维护，包括基本资料、身体数据、生理周期设置等',
                    connections: [
                        { to: 'settings', label: '设置' },
                        { to: 'my_favorites', label: '我的收藏' },
                        { to: 'health_record', label: '健康记录' },
                    ],
                },
                settings: {
                    id: 'settings',
                    title: '设置',
                    subtitle: 'settings.html',
                    category: 'basic',
                    icon: 'fa-cog',
                    x: 2200,
                    y: 1300,
                    details: '应用设置，包括通知设置、隐私设置、账号管理等',
                    connections: [],
                },
                health_record: {
                    id: 'health_record',
                    title: '健康记录',
                    subtitle: 'health_record.html',
                    category: 'basic',
                    icon: 'fa-notes-medical',
                    x: 2600,
                    y: 1000,
                    details: '记录用户的健康数据，如体温、体重、症状等，并可查看历史记录',
                    connections: [
                        { to: 'diet_survey', label: '饮食习惯调查' },
                        { to: 'health_survey', label: '健康状况调查' },
                    ],
                },
                my_favorites: {
                    id: 'my_favorites',
                    title: '我的收藏',
                    subtitle: 'my_favorites.html',
                    category: 'basic',
                    icon: 'fa-star',
                    x: 2200,
                    y: 1000,
                    details: '展示用户收藏的文章、食谱、指导等内容',
                    connections: [],
                },

                // 经期与备孕相关页面
                period_calendar: {
                    id: 'period_calendar',
                    title: '经期日历',
                    subtitle: 'period_calendar.html',
                    category: 'period',
                    icon: 'fa-calendar-alt',
                    x: 3000,
                    y: 1150,
                    details: '展示月历视图，标记经期、排卵期、安全期等，提供经期预测',
                    connections: [
                        { to: 'period_record', label: '添加记录' },
                        { to: 'period_statistics', label: '查看统计' },
                        { to: 'ovulation', label: '排卵预测' },
                    ],
                },
                period_record: {
                    id: 'period_record',
                    title: '经期记录',
                    subtitle: 'period_record.html',
                    category: 'period',
                    icon: 'fa-clipboard',
                    x: 3300,
                    y: 950,
                    details: '录入经期开始/结束、经量、症状、情绪等详细信息',
                    connections: [],
                },
                ovulation: {
                    id: 'ovulation',
                    title: '排卵预测',
                    subtitle: 'ovulation.html',
                    category: 'period',
                    icon: 'fa-venus',
                    x: 3000,
                    y: 800,
                    details: '基于经期数据，预测排卵期，显示受孕窗口，支持实时调整',
                    connections: [],
                },
                period_statistics: {
                    id: 'period_statistics',
                    title: '经期数据统计',
                    subtitle: 'period_statistics.html',
                    category: 'period',
                    icon: 'fa-chart-line',
                    x: 2700,
                    y: 950,
                    details: '分析经期规律、周期长度、症状关联等，提供数据可视化',
                    connections: [],
                },
                diet_survey: {
                    id: 'diet_survey',
                    title: '饮食习惯调查',
                    subtitle: 'diet_survey.html',
                    category: 'period',
                    icon: 'fa-utensils',
                    x: 2200,
                    y: 750,
                    details: '收集用户饮食习惯信息，为个性化饮食方案提供依据',
                    connections: [{ to: 'food_guide', label: '查看饮食指南' }],
                },
                health_survey: {
                    id: 'health_survey',
                    title: '健康状况调查',
                    subtitle: 'health_survey.html',
                    category: 'period',
                    icon: 'fa-heartbeat',
                    x: 2600,
                    y: 750,
                    details: '收集用户健康状况信息，用于个性化健康建议',
                    connections: [],
                },

                // 孕期管理相关页面
                pregnancy_home: {
                    id: 'pregnancy_home',
                    title: '孕期主页',
                    subtitle: 'pregnancy_home.html',
                    category: 'pregnancy',
                    icon: 'fa-baby',
                    x: 3000,
                    y: 1850,
                    details: '孕期信息中心，显示当前孕周信息、胎儿发育状况、待办事项等',
                    connections: [
                        { to: 'prenatal_checkup', label: '产检管理' },
                        { to: 'fetal_movement', label: '胎动记录' },
                        { to: 'fetal_growth', label: '胎儿成长' },
                        { to: 'weight_management', label: '体重管理' },
                        { to: 'hospital_bag', label: '待产包' },
                        { to: 'nutrition_tracking', label: '营养追踪' },
                    ],
                },
                prenatal_checkup: {
                    id: 'prenatal_checkup',
                    title: '产检管理',
                    subtitle: 'prenatal_checkup.html',
                    category: 'pregnancy',
                    icon: 'fa-stethoscope',
                    x: 3400,
                    y: 1750,
                    details: '管理产检计划、记录，提供产检提醒，记录产检结果',
                    connections: [],
                },
                fetal_movement: {
                    id: 'fetal_movement',
                    title: '胎动记录',
                    subtitle: 'fetal_movement.html',
                    category: 'pregnancy',
                    icon: 'fa-heart',
                    x: 3400,
                    y: 1950,
                    details: '记录胎动频率、强度，提供胎动计数器和数据分析',
                    connections: [],
                },
                fetal_growth: {
                    id: 'fetal_growth',
                    title: '胎儿成长',
                    subtitle: 'fetal_growth.html',
                    category: 'pregnancy',
                    icon: 'fa-child',
                    x: 2600,
                    y: 1950,
                    details: '展示按孕周的胎儿发育状况，包括大小、器官发育和行为特点等',
                    connections: [],
                },
                weight_management: {
                    id: 'weight_management',
                    title: '体重管理',
                    subtitle: 'weight_management.html',
                    category: 'pregnancy',
                    icon: 'fa-weight',
                    x: 2600,
                    y: 1750,
                    details: '追踪孕期体重变化，提供标准体重范围和变化曲线',
                    connections: [],
                },
                hospital_bag: {
                    id: 'hospital_bag',
                    title: '待产包准备',
                    subtitle: 'hospital_bag.html',
                    category: 'pregnancy',
                    icon: 'fa-suitcase',
                    x: 3000,
                    y: 2150,
                    details: '待产物品清单，可勾选已准备项目，提供必备品推荐',
                    connections: [],
                },

                // 产后恢复相关页面
                postpartum_record: {
                    id: 'postpartum_record',
                    title: '产后记录',
                    subtitle: 'postpartum_record.html',
                    category: 'postpartum',
                    icon: 'fa-book-medical',
                    x: 2600,
                    y: 2150,
                    details: '记录产后恢复情况，包括身体恢复、情绪变化等',
                    connections: [{ to: 'recovery_plan', label: '恢复计划' }],
                },
                recovery_plan: {
                    id: 'recovery_plan',
                    title: '产后恢复计划',
                    subtitle: 'recovery_plan.html',
                    category: 'postpartum',
                    icon: 'fa-clipboard-list',
                    x: 2800,
                    y: 2350,
                    details: '提供产后恢复建议和计划，包括饮食、运动、心理等方面',
                    connections: [],
                },

                // 健康饮食相关页面
                food_guide: {
                    id: 'food_guide',
                    title: '饮食指南',
                    subtitle: 'food_guide.html',
                    category: 'diet',
                    icon: 'fa-apple-alt',
                    x: 2400,
                    y: 1500,
                    details: '针对不同阶段的饮食指导，包含各类营养素指南和饮食建议',
                    connections: [{ to: 'recipe_recommendations', label: '查看推荐食谱' }],
                },
                recipe_recommendations: {
                    id: 'recipe_recommendations',
                    title: '食谱推荐',
                    subtitle: 'recipe_recommendations.html',
                    category: 'diet',
                    icon: 'fa-utensils',
                    x: 2000,
                    y: 1500,
                    details: '按孕期/产后/婴儿辅食分类的食谱库，含营养分析和制作步骤',
                    connections: [],
                },
                nutrition_tracking: {
                    id: 'nutrition_tracking',
                    title: '营养追踪',
                    subtitle: 'nutrition_tracking.html',
                    category: 'diet',
                    icon: 'fa-chart-pie',
                    x: 2400,
                    y: 1700,
                    details: '记录每日摄入食物，分析营养成分，对比推荐摄入量',
                    connections: [],
                },

                // 知识教育相关页面
                knowledge_list: {
                    id: 'knowledge_list',
                    title: '知识分类列表',
                    subtitle: 'knowledge_list.html',
                    category: 'knowledge',
                    icon: 'fa-book',
                    x: 3600,
                    y: 1500,
                    details: '按主题分类的知识库入口，涵盖备孕、孕期、产后、婴幼儿等',
                    connections: [{ to: 'knowledge_detail', label: '查看文章' }],
                },
                knowledge_detail: {
                    id: 'knowledge_detail',
                    title: '知识详情',
                    subtitle: 'knowledge_detail.html',
                    category: 'knowledge',
                    icon: 'fa-file-alt',
                    x: 3800,
                    y: 1300,
                    details: '知识文章详情页，包含专业内容、图片说明及参考来源',
                    connections: [],
                },
                behavior_guide: {
                    id: 'behavior_guide',
                    title: '行为指南',
                    subtitle: 'behavior_guide.html',
                    category: 'knowledge',
                    icon: 'fa-walking',
                    x: 4000,
                    y: 1500,
                    details: '针对备孕、孕期和产后的行为指导，包括注意事项和建议',
                    connections: [],
                },

                // 伴侣社区相关页面
                partner_binding: {
                    id: 'partner_binding',
                    title: '伴侣绑定',
                    subtitle: 'partner_binding.html',
                    category: 'community',
                    icon: 'fa-user-friends',
                    x: 3400,
                    y: 1500,
                    details: '绑定伴侣账号，共享孕期信息和进度',
                    connections: [{ to: 'partner_sharing', label: '共享设置' }],
                },
                partner_sharing: {
                    id: 'partner_sharing',
                    title: '伴侣共享',
                    subtitle: 'partner_sharing.html',
                    category: 'community',
                    icon: 'fa-share-alt',
                    x: 3800,
                    y: 1700,
                    details: '设置与伴侣共享的内容范围，如日历、提醒、健康数据等',
                    connections: [],
                },
            };

            // 初始化思维导图
            document.addEventListener('DOMContentLoaded', function () {
                // 创建所有节点
                const mindmap = document.getElementById('mindmap');

                // 先创建所有节点
                for (const pageId in pagesData) {
                    const page = pagesData[pageId];
                    const nodeElement = createNodeElement(page);
                    mindmap.appendChild(nodeElement);
                }

                // 再创建所有连接器
                for (const pageId in pagesData) {
                    const page = pagesData[pageId];
                    if (page.connections && page.connections.length > 0) {
                        page.connections.forEach((connection) => {
                            const targetPage = pagesData[connection.to];
                            if (targetPage) {
                                const connector = createConnector(page, targetPage, connection.label);
                                mindmap.appendChild(connector);

                                if (connection.label) {
                                    const labelElement = createConnectorLabel(page, targetPage, connection.label);
                                    mindmap.appendChild(labelElement);
                                }
                            }
                        });
                    }
                }

                // 设置交互事件
                setupInteractions();
            });

            // 创建节点元素
            function createNodeElement(page) {
                const node = document.createElement('div');
                node.id = `node-${page.id}`;
                node.className = `node ${page.category} ${page.id === 'home' ? 'home' : ''}`;
                node.setAttribute('data-id', page.id);
                node.setAttribute('data-category', page.category);
                node.style.left = `${page.x}px`;
                node.style.top = `${page.y}px`;

                const iconClass = page.icon || 'fa-file';

                node.innerHTML = `
                    <div class="node-title">
                        <i class="fas ${iconClass}"></i>
                        ${page.title}
                        <span class="node-toggle"><i class="fas fa-chevron-down"></i></span>
                    </div>
                    <div class="node-subtitle">${page.subtitle}</div>
                    <div class="node-details">
                        <p>${page.details || '无详细说明'}</p>
                        ${
                            page.connections && page.connections.length > 0
                                ? `<p class="mt-2">交互连接：</p>
                            <ul class="ml-3">
                                ${page.connections
                                    .map(
                                        (conn) =>
                                            `<li>→ ${getPageName(conn.to)}${conn.label ? ` (${conn.label})` : ''}</li>`
                                    )
                                    .join('')}
                            </ul>`
                                : '<p class="mt-2">无其他页面连接</p>'
                        }
                    </div>
                `;

                return node;
            }

            // 获取页面名称
            function getPageName(pageId) {
                return pagesData[pageId] ? pagesData[pageId].title : pageId;
            }

            // 创建连接器
            function createConnector(fromPage, toPage, label) {
                const connector = document.createElement('div');
                connector.className = 'connector';
                connector.setAttribute('data-from', fromPage.id);
                connector.setAttribute('data-to', toPage.id);

                // 计算两点之间的连线
                const fromX = fromPage.x + 90; // 节点中心点x坐标
                const fromY = fromPage.y + 30; // 节点中心点y坐标
                const toX = toPage.x + 90;
                const toY = toPage.y + 30;

                // 计算距离和角度
                const deltaX = toX - fromX;
                const deltaY = toY - fromY;
                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
                const angle = (Math.atan2(deltaY, deltaX) * 180) / Math.PI;

                // 设置连接器样式
                connector.style.width = `${distance}px`;
                connector.style.left = `${fromX}px`;
                connector.style.top = `${fromY}px`;
                connector.style.transform = `rotate(${angle}deg)`;

                return connector;
            }

            // 创建连接器标签
            function createConnectorLabel(fromPage, toPage, labelText) {
                const label = document.createElement('div');
                label.className = 'connector-label';
                label.textContent = labelText;

                // 计算标签位置（连线中点）
                const fromX = fromPage.x + 90;
                const fromY = fromPage.y + 30;
                const toX = toPage.x + 90;
                const toY = toPage.y + 30;

                const midX = (fromX + toX) / 2;
                const midY = (fromY + toY) / 2;

                label.style.left = `${midX}px`;
                label.style.top = `${midY}px`;

                return label;
            }

            // 设置交互事件
            function setupInteractions() {
                // 节点点击展开/折叠详情
                const nodes = document.querySelectorAll('.node');
                nodes.forEach((node) => {
                    const toggleBtn = node.querySelector('.node-toggle');
                    toggleBtn.addEventListener('click', (e) => {
                        e.stopPropagation();
                        node.classList.toggle('expanded');
                        const icon = toggleBtn.querySelector('i');
                        if (node.classList.contains('expanded')) {
                            icon.className = 'fas fa-chevron-up';
                        } else {
                            icon.className = 'fas fa-chevron-down';
                        }
                    });
                });

                // 缩放控制
                let scale = 1;
                const mindmap = document.getElementById('mindmap');

                document.getElementById('zoom-in').addEventListener('click', () => {
                    if (scale < 1.5) {
                        scale += 0.1;
                        mindmap.style.transform = `translate(-50%, -50%) scale(${scale})`;
                    }
                });

                document.getElementById('zoom-out').addEventListener('click', () => {
                    if (scale > 0.5) {
                        scale -= 0.1;
                        mindmap.style.transform = `translate(-50%, -50%) scale(${scale})`;
                    }
                });

                document.getElementById('reset-view').addEventListener('click', () => {
                    scale = 1;
                    mindmap.style.transform = `translate(-50%, -50%) scale(1)`;
                    mindmap.style.left = '50%';
                    mindmap.style.top = '50%';
                    isDragging = false;
                });

                // 使用说明折叠/展开
                const instructionToggle = document.getElementById('toggle-instructions');
                const instructionContent = document.getElementById('instruction-content');

                instructionToggle.addEventListener('click', () => {
                    if (instructionContent.style.display === 'none') {
                        instructionContent.style.display = 'block';
                        instructionToggle.innerHTML = '<i class="fas fa-minus"></i>';
                    } else {
                        instructionContent.style.display = 'none';
                        instructionToggle.innerHTML = '<i class="fas fa-plus"></i>';
                    }
                });

                // 分类筛选
                const categoryBtns = document.querySelectorAll('.category-btn');
                categoryBtns.forEach((btn) => {
                    btn.addEventListener('click', () => {
                        // 移除其他按钮的active类
                        categoryBtns.forEach((b) => b.classList.remove('active'));
                        btn.classList.add('active');

                        const category = btn.getAttribute('data-category');
                        filterNodesByCategory(category);
                    });
                });

                // 拖动功能
                let isDragging = false;
                let startX, startY;
                let initialLeft, initialTop;

                const container = document.querySelector('.mindmap-container');

                container.addEventListener('mousedown', (e) => {
                    // 只有在点击空白区域时才开始拖动
                    if (e.target === mindmap || e.target === container) {
                        isDragging = true;
                        startX = e.clientX;
                        startY = e.clientY;

                        const style = window.getComputedStyle(mindmap);
                        initialLeft = parseInt(style.left);
                        initialTop = parseInt(style.top);

                        container.style.cursor = 'grabbing';
                    }
                });

                document.addEventListener('mousemove', (e) => {
                    if (isDragging) {
                        const deltaX = e.clientX - startX;
                        const deltaY = e.clientY - startY;

                        mindmap.style.left = `${initialLeft + deltaX}px`;
                        mindmap.style.top = `${initialTop + deltaY}px`;
                    }
                });

                document.addEventListener('mouseup', () => {
                    isDragging = false;
                    container.style.cursor = 'default';
                });
            }

            // 根据分类筛选节点
            function filterNodesByCategory(category) {
                const nodes = document.querySelectorAll('.node');
                const connectors = document.querySelectorAll('.connector');
                const labels = document.querySelectorAll('.connector-label');

                if (category === 'all') {
                    // 显示所有节点和连接
                    nodes.forEach((node) => (node.style.display = 'block'));
                    connectors.forEach((conn) => (conn.style.display = 'block'));
                    labels.forEach((label) => (label.style.display = 'block'));
                } else {
                    // 只显示指定分类的节点
                    nodes.forEach((node) => {
                        if (node.getAttribute('data-category') === category || node.id === 'node-home') {
                            node.style.display = 'block';
                        } else {
                            node.style.display = 'none';
                        }
                    });

                    // 只显示连接到可见节点的连接器
                    connectors.forEach((conn) => {
                        const fromId = conn.getAttribute('data-from');
                        const toId = conn.getAttribute('data-to');

                        const fromNode = document.getElementById(`node-${fromId}`);
                        const toNode = document.getElementById(`node-${toId}`);

                        if (fromNode.style.display !== 'none' && toNode.style.display !== 'none') {
                            conn.style.display = 'block';
                        } else {
                            conn.style.display = 'none';
                        }
                    });

                    // 只显示连接到可见节点的标签
                    labels.forEach((label) => {
                        // 找到相应的连接器
                        const connectors = document.querySelectorAll('.connector');
                        let shouldShow = false;

                        // 检查标签位置是否在任何可见连接器的中点
                        // 简化处理，如果有连接器显示，那么对应的标签也显示
                        if (parseInt(label.style.left) > 0) {
                            const nearbyConnectors = Array.from(connectors).filter(
                                (conn) => conn.style.display !== 'none'
                            );
                            shouldShow = nearbyConnectors.length > 0;
                        }

                        label.style.display = shouldShow ? 'block' : 'none';
                    });
                }
            }
        </script>
    </body>
</html>
